<template>
  <!-- 系统公告 -->
	<div>
		<h3 class="notitle">当前页面：{{ $route.meta.title }}</h3>
		<div id="table">
          <div class="pb10px">
            <!-- ctrl+alt+l 格式化代码   -->
            <el-input v-model="searchForm.title"  class="input1" clearable placeholder="请输入公告标题"
                      size="small" ></el-input>
            <el-button type="primary" icon="el-icon-search" size="small" class="mr10px" @click="handleSearch">搜索</el-button>
          </div>
          <div>
            <el-button type="primary" @click="handleAdd" size="small">新增</el-button>
            <!-- <el-button type="danger" size="small" @click="batchDelete" :disabled="ids.length>0?false:true">批量删除
            </el-button> -->
          </div>
          
          <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55"
                align="center">
            </el-table-column>
            <el-table-column
                prop="id"
                label="ID"
                width="100"
                align="center">
            </el-table-column>
            <el-table-column
                prop="title"
                label="标题"
                width="200"
                align="center">
            </el-table-column>
		
            <el-table-column
                prop="content"
                label="内容"
                width="260"
                align="center">
                <template v-slot="scope">
                  <el-button @click="show(scope.row.content)" size="mini">显示内容</el-button>
                </template>
            </el-table-column>
            <el-table-column
                prop="time"
                label="创建时间"
                width="200"
                align="center">
            </el-table-column>
			      <el-table-column
                prop="open"
                label="是否公开"
                width="200"
                align="center">
                <template v-slot="scope">
                  <el-switch v-model="scope.row.open" @change="handle(scope.$index, scope.row)"></el-switch>
                </template>
            </el-table-column>
			      
			
            <!-- fixed="right"-->
            <el-table-column label="操作"
                             width="200"
                             align="center">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">修改
                </el-button>
                <!-- index索引 scope.row这一条数据所有的值 -->
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
      
          <!--自定义分页组件-->
          <custom-pages
              @current-change="currentChange"
              @size-change="sizeChange"
              :total="pageInfo.total"
              :page-size="pageInfo.pageSize"
              :current-page="pageInfo.pageNum"
              class="custom-pages"
          >
          </custom-pages>
          <!--自定义分页组件-->
        

          
          <el-dialog
              title="系统公告管理"
              :visible.sync="isDrawerDialog"
              @close="handleClose"
          >
            <el-form :model="formData" :rules="ruleForm" ref="formData" label-width="100px" >
              <el-form-item label="状态" prop="open" v-if="judge1 == '1'">
                <el-select v-model="formData.open" placeholder="请选择是否公开" >
                  <el-option
                    v-for="item in  options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              
              <el-form-item label="标题" prop="title" >
                <el-input v-model="formData.title" placeholder="请输入公告标题"></el-input>
              </el-form-item>
              <el-form-item label="内容" prop="content" >
                <div id="editor"></div>
              </el-form-item>
              
            </el-form>
            
            <div slot="footer" class="dialog-footer">
                <el-button @click="isDrawerDialog = false">取 消</el-button>
                <el-button type="primary" @click="submitDrawer(e)">确 定</el-button>
              </div>
          </el-dialog>
          
    
          <el-dialog
            title="提示"
            :visible.sync="error"
            width="30%"
            append-to-body
            top="20%"
            ><!-- append-to-body出现不会屏幕变暗,top位置下调 -->
            <span>{{ message }}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="error = false">取 消</el-button>
                <el-button type="primary" @click="error = false">确 定</el-button>
            </span>
            </el-dialog>
            
            <el-dialog
              title="公告的具体内容"
              :visible.sync="text"
              top="10%"
            >
              <el-card class="w-e-text">
                <div v-html="content"></div>
              </el-card>
              <div slot="footer" class="dialog-footer">
                
                <el-button type="primary" @click="text=false">确 定</el-button>
              </div>
            </el-dialog>

        </div>
		
	</div>
  </template>
   
  <script>
  
  import E from "wangeditor"
  import create from "@/mixins/create";
  import http from "@/utils/request.js"
  export default {
	
	data() {
	  return {
		api: {
              pageUrl:"/system/getnotice",
              saveUrl:"/system/addnotice",
              delUrl: "/system/deletenotice",
              modUrl: "/system/updatenotice",
              search:"/system/selectnotice",
            },
            ruleForm: {
              title: [
                {required: true, message: '请输入公告标题', trigger: 'blur'},
              ],
			        content: [
                {required: true, message: '请输入公告内容', trigger: 'blur'},
              ],
              open: [
                {required: true, message: '请选择是否公开', trigger: 'blur'},
              ],
            },
      
            formData: {
              id: null,
              title:"",//公告标题
              content: "", //公告内容
              open: "", //公开状态
              
            },
            searchForm: {
              title: ""
            },
            message:'',
            
            options: [{
              value: 'false',
              label: '不公开'
            }, {
              value: 'true',
              label: '公开'
            },],
            value: '',
            editor:null,
            txt:0,//判断条件
            text:false,
            content:'',
            judge1:sessionStorage.getItem("judge"),
	  };
	},
	mixins: [create],
    created() {
    },
	methods: {
    show(content){
          this.content=content//绑定富文本数据
          this.text=true
    },
    //获取分页数据
    getList() {
            let formData = {
                //当前页
                pageNum: this.pageInfo.pageNum,
                //分页大小
                pageSize:this.pageInfo.pageSize,
                //总条数
                total: this.pageInfo.total,
            };
            
            http.get(`${this.api.pageUrl}?${new URLSearchParams(formData).toString()}`).then(res => {
                if(res.data.code == 200){
                  this.tableData = res.data.data.records
                  this.pageInfo.total = res.data.data.total//动态获取分页
                  console.log(res)
                }
                
                
            })
        },
      //搜索
      handleSearch() {
            let formData1={
              title:this.searchForm.title,
              //当前页
              pageNum: this.pageInfo.pageNum,
              //分页大小
              pageSize:this.pageInfo.pageSize,
            }
            
            http.get(`${this.api.search}?${new URLSearchParams(formData1).toString()}`).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        console.log(res)
                        this.message=res.data.msg,
                        this.error=true,
                        //更换表格数据
                        this.tableData = res.data.data.records
                        this.pageInfo.total = res.data.data.total//动态获取分页
                    }
                    else {
                        this.message=res.data.msg,
                        this.error=true,
                        this.getList()
                    }
                })
      },
	  //提交数据
    submitDrawer(e) {
            if(this.txt == 1){
              this.formData.content=this.editor.txt.html()   // 获取内容
            }
           
            //增加数据
            if(sessionStorage.getItem('judge') == '1'){
                http.post(this.api.saveUrl,this.formData).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        this.isDrawerDialog = false
                        this.message=res.data.msg,
                        this.error=true,
                        this.getList()
                    }
                    else {
                        this.message=res.data.msg,
                        this.error=true,
                        // this.$message({
                        //     message: res.data.msg,
                        //     type: 'error'
                        // });
                        this.getList()
                    }
                })
            }
            //修改数据
            else if(sessionStorage.getItem('judge') == '2'){
                http.put(this.api.modUrl,this.formData).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        this.isDrawerDialog = false
                        this.message=res.data.msg,
                        this.error=true,
                        this.getList()
                    }
                    else{
                        this.message=res.data.msg;
                        this.error=true;
                        
                        
                      }
                })
            }
        },
    //添加数据
    handleAdd() {
            this.txt=1//判断是否设置富文本内容到formData中
            sessionStorage.setItem('judge',1)
           
            this.isDrawerDialog = true
            this.formData = {}
            this.$nextTick(() =>{
                this.editor=new E(`#editor`)//初始化富文本
                this.editor.create()//创建富文本

            })
        },
    //编辑
    handleEdit(index, row) {
            sessionStorage.setItem('judge',2)
            
            this.isDrawerDialog = true
            this.txt=1//判断是否设置富文本内容到formData中
            this.formData = Object.assign({}, row)
            this.$nextTick(() =>{
                  this.editor=new E(`#editor`)//初始化富文本
                  this.editor.create()//创建富文本
                  this.editor.txt.html(row.content)//设置内容
            })
    },
    //编辑公开状态
    handle(index, row) {
            this.txt=0//判断是否设置富文本内容到formData中
            sessionStorage.setItem('judge',2)
           
            this.formData =  row

            //设置状态
            if(this.formData.open == true){
              this.formData.open = true
            }
            else{
              this.formData.open = false
            }
           
            this.submitDrawer(this.formData)
            
            
    },
    //关闭富文本弹窗
    handleClose() {
        // 销毁编辑器
        this.editor.destroy()
        this.editor = null
        
    },
  }

	
  };
  </script>
  <style scoped>
	
  .notitle{
    color: black;
    font-size:25px;
    margin-top: 1%; 
    margin-left: 0%;
  }/* 面包屑 */

  #title{
	  font-size:25px;/*字体大小 */
    text-align: center;/*位置居中 */
	  margin-top: 5px;
	  margin-bottom: 5px;
  }	

  .input1{
    width: 200px;
  }
  .custom-pages {
      position: absolute;
      /* position: relative; */
      top: 100%;
      /* 设置其始终位于页面底部 */
  }
  </style>